<template>
  <span class="status-badge" :class="[`status-${type}`, size, { 'dot-style': dotStyle }]">
    <i v-if="dotStyle" class="status-dot"></i>
    <slot>{{ text }}</slot>
  </span>
</template>

<script>
export default {
  name: 'StatusBadge',
  props: {
    type: {
      type: String,
      default: 'default',
      validator: (value) => [
        'default', 'primary', 'success', 'warning', 
        'error', 'info', 'processing', 'completed'
      ].includes(value)
    },
    text: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'default',
      validator: (value) => ['small', 'default', 'large'].includes(value)
    },
    dotStyle: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  font-weight: 500;
  transition: all 0.2s;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.dot-style {
  padding: 0 0 0 10px;
  background: transparent !important;
}

/* 尺寸变体 */
.small {
  font-size: 10px;
  padding: 0 6px;
  border-radius: 10px;
}

.small .status-dot {
  width: 4px;
  height: 4px;
  margin-right: 4px;
}

.large {
  font-size: 14px;
  padding: 2px 10px;
  border-radius: 16px;
}

.large .status-dot {
  width: 8px;
  height: 8px;
  margin-right: 8px;
}

/* 状态颜色 */
.status-default {
  background-color: var(--background-grey);
  color: var(--text-secondary);
}

.status-default .status-dot {
  background-color: var(--text-secondary);
}

.status-primary {
  background-color: var(--background-blue-light);
  color: var(--primary-blue);
}

.status-primary .status-dot {
  background-color: var(--primary-blue);
}

.status-success {
  background-color: var(--success-light);
  color: var(--success);
}

.status-success .status-dot {
  background-color: var(--success);
}

.status-warning {
  background-color: var(--warning-light);
  color: var(--warning);
}

.status-warning .status-dot {
  background-color: var(--warning);
}

.status-error {
  background-color: var(--error-light);
  color: var(--error);
}

.status-error .status-dot {
  background-color: var(--error);
}

.status-info {
  background-color: var(--info-light);
  color: var(--info);
}

.status-info .status-dot {
  background-color: var(--info);
}

.status-processing {
  background-color: var(--info-light);
  color: var(--info);
}

.status-processing .status-dot {
  background-color: var(--info);
  box-shadow: 0 0 0 2px var(--info-light);
  animation: processing-animation 1.2s infinite ease-in-out;
}

.status-completed {
  background-color: var(--background-green-light);
  color: var(--medical-green);
}

.status-completed .status-dot {
  background-color: var(--medical-green);
}

@keyframes processing-animation {
  0% {
    opacity: 0.8;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.8;
    transform: scale(0.8);
  }
}
</style> 